import React from 'react';
import {Link} from 'react-router-dom'

import TabBar from 'antd-mobile/lib/tab-bar';
import Flex from 'antd-mobile/lib/flex';
import SearchBar from 'antd-mobile/lib/search-bar';
import List from 'antd-mobile/lib/list';
import Badge from 'antd-mobile/lib/badge';
import Tabs from 'antd-mobile/lib/tabs';

// import NewsList from './NewsList';

import 'antd-mobile/lib/badge/style/index.css'
import 'antd-mobile/lib/list/style/index.css'
import 'antd-mobile/lib/tab-bar/style/index.css'
import 'antd-mobile/lib/flex/style/index.css'
import 'antd-mobile/lib/search-bar/style/index.css'
import 'antd-mobile/lib/tabs/style/index.css'

import '../static/styles/index.css'
import '../static/styles/friend.css'
import '../static/icon/icon.css'

import { get } from  '../api/getData';

const TabPane = Tabs.TabPane;

let CardItem = React.createClass({
    getInitialState : function () {
        return {
            member : [],
        }
    },
    componentDidMount : function () {
        let __this = this;
        get('/home/memberList' , {} , function (error , data) {
            if(error === null) {
                if (data.code === 1) {
                    __this.setState({
                        member: data.data,
                    });
                }
            }
        });
    },
    render : function(){
        return (
            <Link to="/user-info">
                {
                    this.state.member.map(function (member) {
                        return (
                            <Flex className="card">
                                <Flex.Item className="flex-auto">
                                    <div className="head">
                                        <img className="head-img" src={member.avatar} alt=""/>
                                    </div>
                                </Flex.Item>
                                <Flex.Item className="card-desc">
                                    <Flex direction="column" align="start">
                                        <Flex.Item className="user-name ml0">
                                            {member.nickname}
                                        </Flex.Item>
                                        <Flex.Item className="ml0">
                                            亲信儿科技有限公司
                                        </Flex.Item>
                                        <Flex.Item className="ml0">
                                            技术总监
                                        </Flex.Item>
                                    </Flex>
                                </Flex.Item>
                                <Flex.Item className="flex-auto">
                                    <i className="iconfont icon-more"></i>
                                </Flex.Item>
                            </Flex>
                        )
                    })
                }
            </Link>
        )
    }
});


let NewsItem = React.createClass({
    getInitialState : function () {
      return {
          cate : [],
          defaultActiveKey : '0',
      }
    },
    componentDidMount : function () {
        let __this = this;
        get('/home/cate' , {} , function (error , data) {
            if(error === null) {
                if (data.code === 1) {
                    __this.setState({
                        cate: data.data,
                        defaultActiveKey : data.data[0].id.toString(),
                    });
                }
            }
        });
    },
    callback : function (key) {
        let __this = this;
        get('/home/articleList' , {cate_id : key} , function (error , data) {
            if(error === null) {
                if (data.code === 1) {
                    let cateList = __this.state.cate;
                    cateList.map(function (cate) {
                        if(cate.id === key){
                            cate.article = data.data;
                        }
                    });
                    __this.setState({
                        cate: cateList
                    });
                }
            }
        });
        this.setState({
            defaultActiveKey: key
        });
    },
    handleTabClick : function (key) {
        this.setState({
            defaultActiveKey: key
        });
    },
    render : function () {
        return (
            <div>
                <Tabs activeKey={this.state.defaultActiveKey} onChange={this.callback} pageSize={5} onTabClick={this.handleTabClick} >
                    {
                        this.state.cate.map(function (cate) {
                            return (
                                <TabPane tab={cate.name} key={cate.id}>
                                    {
                                        cate.article?cate.article.map(function (article) {
                                          return (
                                              <Flex className="card bd-b1">
                                                  <Flex.Item className="flex-auto">
                                                      <div className="head head-square">
                                                          <img className="head-img"
                                                               src={require('../static/imgs/default.jpg')} alt=""/>
                                                      </div>
                                                  </Flex.Item>
                                                  <Flex.Item className="card-desc">
                                                      <Flex direction="column" align="start">
                                                          <Flex.Item className="user-name ml0">
                                                              {article.title}
                                                          </Flex.Item>
                                                          <Flex.Item className="ml0">
                                                              {article.description}
                                                          </Flex.Item>
                                                          <Flex.Item className="ml0">
                                                          </Flex.Item>
                                                      </Flex>
                                                  </Flex.Item>
                                              </Flex>
                                          )
                                        }):''
                                    }
                                </TabPane>
                            );
                        })
                    }
                </Tabs>
            </div>
        )
    }
});

let MyCenter = React.createClass({
    render : function () {
        return (
            <div>
                <div className="bgblack-a pd20">
                    <Flex className="card">
                        <Flex.Item className="flex-auto">
                            <div className="head">
                                <img className="head-img" src={require('../static/imgs/default.jpg')} alt=""/>
                            </div>
                        </Flex.Item>
                        <Flex.Item className="card-desc cw">
                            <Flex direction="column" align="start">
                                <Flex.Item className="user-name ml0 cw">
                                    吴辉
                                </Flex.Item>
                                <Flex.Item className="ml0 cw">
                                    亲信儿科技有限公司
                                </Flex.Item>
                                <Flex.Item className="ml0 cw">
                                    技术总监
                                </Flex.Item>
                            </Flex>
                        </Flex.Item>
                        <Flex.Item className="flex-auto">
                            <i className="iconfont icon-pan"></i>
                        </Flex.Item>
                    </Flex>
                    <Flex justify="between" align="center">
                        <Flex direction="column" className="user-log">
                            <Flex.Item>
                                3
                            </Flex.Item>
                            <Flex.Item>
                                最近访客
                            </Flex.Item>
                        </Flex>
                        <Flex direction="column"  className="user-log">
                            <Flex.Item>
                                3
                            </Flex.Item>
                            <Flex.Item>
                                最近浏览
                            </Flex.Item>
                        </Flex>
                        <Flex direction="column"  className="user-log">
                            <Flex.Item>
                                3
                            </Flex.Item>
                            <Flex.Item>
                                新增好友
                            </Flex.Item>
                        </Flex>
                    </Flex>
                </div>
                <List>
                    <List.Item
                        thumb={require('../static/svg/erweima.svg')}
                        arrow="horizontal"
                    >
                        我的名片
                    </List.Item>
                    <List.Item
                        thumb={require('../static/svg/check.svg')}
                        arrow="horizontal"
                    >
                        认证加V
                    </List.Item>
                </List>
            </div>
        )
    }
});

let Search = React.createClass({
    getInitialState:function () {
        return this.state = {
            focused : false
        }
    },
    render : function () {
        return (
            <SearchBar
                placeholder="搜索"
                focused={this.state.focused}
                onFocus={() => {
                    this.setState({
                        focused: false,
                    });
                }}
            />
        )
    }
});

let Friends = React.createClass({
    getInitialState:function () {
        return this.state = {
            focused : false
        }
    },
    render : function () {
        return (
            <div style={{background:"#efeff4"}}>
                <Link to="/chat" >
                    <Flex className="friend-item-box">
                        <Flex.Item>
                            <div className="friend-head">
                                <img src={require('../static/imgs/default.jpg')} alt=""/>
                            </div>
                        </Flex.Item>
                        <Flex.Item className="friend-item-box-right">
                            <Flex direction="column" justify="start" align="start">
                                <Flex.Item  style={{width:'100%'}}>
                                    <Flex direction="row" justify="around" className="friend-item-box-user">
                                        <Flex.Item>
                                            <div className="friend-item-box-user-name">吴辉</div>
                                        </Flex.Item>
                                        <Flex.Item style={{textAlign:'right'}}>
                                            <div className="friend-item-box-time">10:23:12</div>
                                        </Flex.Item>
                                    </Flex>
                                </Flex.Item>
                                <Flex.Item>
                                    <div className="friend-item-box-user-content">嗨，欢迎来到商会，我是吴辉。</div>
                                </Flex.Item>
                            </Flex>
                        </Flex.Item>
                    </Flex>
                </Link>
                <Link to="/chat" >
                    <Flex className="friend-item-box">
                        <Flex.Item>
                            <div className="friend-head">
                                <img src={require('../static/imgs/default.jpg')} alt=""/>
                            </div>
                        </Flex.Item>
                        <Flex.Item className="friend-item-box-right">
                            <Flex direction="column" justify="start" align="start">
                                <Flex.Item  style={{width:'100%'}}>
                                    <Flex direction="row" justify="around" className="friend-item-box-user">
                                        <Flex.Item>
                                            <div className="friend-item-box-user-name">吴辉</div>
                                        </Flex.Item>
                                        <Flex.Item style={{textAlign:'right'}}>
                                            <div className="friend-item-box-time">10:23:12</div>
                                        </Flex.Item>
                                    </Flex>
                                </Flex.Item>
                                <Flex.Item>
                                    <div className="friend-item-box-user-content">嗨，欢迎来到商会，我是吴辉。</div>
                                </Flex.Item>
                            </Flex>
                        </Flex.Item>
                    </Flex>
                </Link>
                <Link to="/chat" >
                    <Flex className="friend-item-box">
                        <Flex.Item>
                            <div className="friend-head">
                                <img src={require('../static/imgs/default.jpg')} alt=""/>
                            </div>
                        </Flex.Item>
                        <Flex.Item className="friend-item-box-right">
                            <Flex direction="column" justify="start" align="start">
                                <Flex.Item  style={{width:'100%'}}>
                                    <Flex direction="row" justify="around" className="friend-item-box-user">
                                        <Flex.Item>
                                            <div className="friend-item-box-user-name">吴辉</div>
                                        </Flex.Item>
                                        <Flex.Item style={{textAlign:'right'}}>
                                            <div className="friend-item-box-time">10:23:12</div>
                                        </Flex.Item>
                                    </Flex>
                                </Flex.Item>
                                <Flex.Item>
                                    <div className="friend-item-box-user-content">嗨，欢迎来到商会，我是吴辉。</div>
                                </Flex.Item>
                            </Flex>
                        </Flex.Item>
                    </Flex>
                </Link>
            </div>
        )
    }
});

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'indexTab',
            hidden: false,
        };
    }

    renderContent(page , isSearch) {
        let pageItem = <CardItem/>;
        if(page === 'index'){
            pageItem = <CardItem/>;
        }else if(page === 'my-center'){
            pageItem = <MyCenter/>;
        }else if(page === 'news'){
            pageItem = <NewsItem/>;
        }else if(page === 'friends'){
            pageItem = <Friends/>;
        }
        return (
            <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
                {isSearch ? <Search/> : null}
                {pageItem}
            </div>
        );
    }

    render() {
        return (
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
                hidden={this.state.hidden}
            >
                <TabBar.Item
                    title="名片"
                    key="名片"
                    className="aa"
                    icon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selected={this.state.selectedTab === 'indexTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'indexTab',
                        });
                    }}
                    data-seed="logId"
                >
                    {this.renderContent('index' , 1)}
                </TabBar.Item>
                <TabBar.Item
                    title="好友"
                    key="好友"
                    icon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selected={this.state.selectedTab === 'cartTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'cartTab',
                        });
                    }}
                    data-seed="logId"
                >
                    {this.renderContent('friends' , 0)}
                </TabBar.Item>
                <TabBar.Item
                    title="动态"
                    key="动态"
                    icon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selected={this.state.selectedTab === 'fandTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'fandTab',
                        });
                    }}
                    data-seed="logId"
                >
                    {this.renderContent('news' , 0)}
                </TabBar.Item>
                <TabBar.Item
                    title="我的"
                    key="我的"
                    icon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selectedIcon={<div style={{
                        width: '0.6rem',
                        height: '0.6rem',
                        background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  0.58rem 0.58rem no-repeat' }}
                    />
                    }
                    selected={this.state.selectedTab === 'myTab'}
                    onPress={() => {
                        this.setState({
                            selectedTab: 'myTab',
                        });
                    }}
                    data-seed="logId"
                >
                    {this.renderContent('my-center' , 0)}
                </TabBar.Item>
            </TabBar>
        );
    }
}

export default Index;